<script setup lang="tsx">
import "vue-json-pretty/lib/styles.css";
import VueJsonPretty from "vue-json-pretty";
import type { OperationLogItem } from "./types";

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
const columns = [
  {
    label: "用户名",
    prop: "pureUser.userName"
  },
  {
    label: "IP 地址",
    prop: "ipAddress"
  },
  {
    label: "IP 归属地",
    prop: "location"
  },
  {
    label: "操作系统",
    prop: "os"
  },
  {
    label: "浏览器类型",
    prop: "browser"
  },
  {
    label: "请求时间",
    prop: "_requestTime"
  },
  {
    label: "请求方法",
    prop: "method"
  },
  {
    label: "请求状态",
    prop: "_status"
  },
  {
    label: "请求耗时",
    prop: "duration"
  },
  {
    label: "请求接口",
    prop: "apiPath",
    copy: true
  }
];
const log_data = computed(() => {
  return props.data[0] as OperationLogItem;
});
const dataList = ref([
  {
    title: "响应头",
    name: "responseHeaders",
    data: log_data.value.responseHeaders
  },
  {
    title: "响应体",
    name: "responseBody",
    data: log_data.value.responseBody
  },
  {
    title: "请求头",
    name: "requestHeaders",
    data: log_data.value.requestHeaders
  },
  {
    title: "请求体",
    name: "requestBody",
    data: log_data.value.requestBody
  }
]);
</script>

<template>
  <div>
    <el-scrollbar>
      <PureDescriptions border :data="data" :columns="columns" :column="5" />
    </el-scrollbar>
    <el-tabs :modelValue="'responseBody'" type="border-card" class="mt-4">
      <el-tab-pane
        v-for="(item, index) in dataList"
        :key="index"
        :name="item.name"
        :label="item.title"
      >
        <el-scrollbar max-height="calc(100vh - 240px)">
          <vue-json-pretty v-model:data="item.data" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
